<template>
  <div class="settings-details">
    <header-template-phone>
      <template v-slot:left>
        <span class="icon" @click="hideSettings">
          <i class="iconfont iconstbar_fanhui"></i>
        </span>
        <span>返回</span>
      </template>
      <template v-slot:center>
        {{name}}
      </template>
      <template v-slot:right>
        <div @click="handleSaveSettings">
          保存
        </div>
      </template>
    </header-template-phone>
    <div class="main">
      <slot>
      </slot>
    </div>
    <div class="hint">
      <div class="title">
        提示:
      </div>
      <div class="content">
        {{hint}}
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
export default {
  components: {
    HeaderTemplatePhone,
    HeaderBack
  },
  props: { 
    name: {
      type: String,
      default: '手机'
    },
    hint: {
      type: String,
      default: '联系方式绑定后，不可修改，如需修改请联系代理修改，请谨慎操作！'
    }
  },
  methods: {
    handleSaveSettings() {
      this.$emit('save')
    },
    hideSettings() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .settings-details 
    .main 
      box-sizing border-box 
      padding-top 48px 
    .hint 
      margin-top 25px 
      box-sizing border-box 
      padding 0 10px 
      font-size 15px
      line-height 25px 
      .title 
        color $color-theme-red 

</style>